<script type="text/javascript">
    function updatecalendar()
    {
        jQuery.blockUI({});
        jQuery.post("?action=updatecalendar", jQuery("#calendarform").serialize(), function(data){
            var d = eval("(" + data + ")");
            if(parseInt(data) == 1) {
                jQuery.unblockUI();
            }
        });
    }
    
    function onSelectDayTypeChange(s, questionday){
        if(s.value == 0 || s.value == 2) {
            jQuery("#answer_1_" + questionday).css("visibility","hidden");
            jQuery("#answer_2_" + questionday).css("visibility","hidden");
            jQuery("#answer_3_" + questionday).css("visibility","hidden");
        } else {
            jQuery("#answer_1_" + questionday).css("visibility","visible");
            jQuery("#answer_2_" + questionday).css("visibility","visible");
            jQuery("#answer_3_" + questionday).css("visibility","visible");
            jQuery("#question_" + questionday).css("visibility","visible");
        }
        if(s.value == 0) {
            jQuery("#question_" + questionday).css("visibility","hidden");            
        }
    }    

</script>


<div class="row-fluid">
    <div class="span12">
        <div class="box">
            <div class="box-head tabs">
                <h3>Edit Easter Calendar Content</h3>
                <ul class='nav nav-tabs'>
                    <li class='active'>                        
                        <a href="javascript:updatecalendar();" style="cursor:pointer;">Update calendar</a>
                    </li>                    
                </ul>
            </div>
            <div class="box-content box-nomargin">
                <div class="tab-content">
                    <div class="tab-pane active" id="basic">
                        <form method="post" id="calendarform">
                            <table class='table table-striped table-bordered'>
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Type</th>    
                                        <th>Question</th>                                                                            
                                        <th>Answer 1</th>
                                        <th>Answer 2</th>
                                        <th>Answer 3</th>
                                        <th>Custom text</th>
                                        <th>Media</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (count($view->days) == 0) { ?>
                                        <tr>
                                            <td colspan="7" style="padding: 40px;text-align: center;">
                                                You have no question. <a href="?action=setupcalendarquestion">Click here</a> to set up sample data
                                            </td>
                                        </tr>
                                    <?php } ?>
                                    <?php foreach ($view->days as $i => $u) { ?>
                                        <tr<?php if ($i % 2 != 0) { ?> style='background-color:#F6F6F6;'<?php } ?>>
                                            <td><?php echo $u['day_num']; ?>.03.2013</td>
                                            <td>
                                                <select id="type_<?php echo $u['question_day_id']; ?>" onchange="onSelectDayTypeChange(this, <?php echo $u['question_day_id']; ?>);" style="width:100px;cursor: pointer;" name="data[<?php echo $u['question_day_id']; ?>][question_type]">
                                                    <option <?php if($u['question_type'] == 0){ ?>selected="selected"<?php } ?> value="0">No question</option>
                                                    <option <?php if($u['question_type'] == 1){ ?>selected="selected"<?php } ?> value="1">Choices</option>
                                                    <option <?php if($u['question_type'] == 2){ ?>selected="selected"<?php } ?> value="2">Free text</option>
                                                    
                                                </select>
                                            </td>
                                            <td><input id="question_<?php echo $u['question_day_id']; ?>" name="data[<?php echo $u['question_day_id']; ?>][question]" style="width: 98%;" type="text" value="<?php echo $u['question']; ?>" /></td>                                            
                                            <td><input id="answer_1_<?php echo $u['question_day_id']; ?>" name="data[<?php echo $u['question_day_id']; ?>][answer_1]" style="width: 98%;" type="text" value="<?php echo $u['answer_1']; ?>" /></td>
                                            <td><input id="answer_2_<?php echo $u['question_day_id']; ?>" name="data[<?php echo $u['question_day_id']; ?>][answer_2]" style="width: 98%;" type="text" value="<?php echo $u['answer_2']; ?>" /></td>
                                            <td><input id="answer_3_<?php echo $u['question_day_id']; ?>" name="data[<?php echo $u['question_day_id']; ?>][answer_3]" style="width: 98%;" type="text" value="<?php echo $u['answer_3']; ?>" /></td>
                                            <td><input name="data[<?php echo $u['question_day_id']; ?>][question_label]" style="width: 98%;" type="text" value="<?php echo $u['question_label']; ?>" /></td>
                                            <td align="center">
                                                <a href="?action=editcalendarpicture&question_day_id=<?php echo $u['question_day_id']; ?>">                        
                                                    <?php if ($u['media_type'] == "none") { ?>
                                                        <img src="<?php echo $view->layoutUrl; ?>img/christmas-edit-icon.png" />
                                                    <?php } elseif ($u['media_type'] == "image") { ?>
                                                        <img src="<?php echo $view->layoutUrl; ?>img/christmas-image-icon.png" />
                                                    <?php } else { ?>
                                                        <img src="<?php echo $view->layoutUrl; ?>img/christmas-youtube-icon.png" />
                                                    <?php } ?>
                                                </a>
                                            </td>
                                        </tr>
                                    <?php } ?>                               
                                </tbody>
                            </table>
                        </form>
                    </div>                    
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function cleanUpUI(){
        <?php for($i = 1;$i<=24;$i++) { ?>
        onSelectDayTypeChange(document.getElementById('type_<?php echo $i;?>'), <?php echo $i;?>);
        <?php } ?>
    }
    setTimeout("cleanUpUI()", 500);
</script>